<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>建设单位注册</title>
	<script src="../../js/header.js"></script>
<!--	<script src="../../js/jsencrypt.min.js"></script>-->
	<style type="text/css">
		html, body, #app {
			padding: 0px;
			margin: 0px;
		}
		#app{
			border-top: 3px solid #0D9AFF;
			/*background: #FFFFFF;
			box-shadow: 0px 2px 4px 0 rgba(200,200,200,0.50);*/
			padding: 25px;
			/*background: url(../../images/bg.png) no-repeat;
			background-size: cover;*/
			/*background-attachment: fixed;*/
			overflow: hidden;
		}
		.tab-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 4px solid #0D9AFF;
			font-family: PingFangSC-Medium;
			padding-left:10px;
			margin-bottom: 20px;
		}
		.el-dialog__footer {
			padding: 10px 20px 20px;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.el-dialog__body {
			color: rgb(96, 98, 102);
			font-size: 14px;
			word-break: break-all;
			padding: 0px 20px;
		}
		#excel {
			display: none;
		}
		.el-input__inner {
			-webkit-appearance: none;
			background-color: #FFF;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			font-size: inherit;
			height: 30px;
			line-height: 30px;
			outline: 0;
			padding: 0 15px;
			-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			transition: border-color .2s cubic-bezier(.645,.045,.355,1);
			width: 100%;
		}
		.listed .el-form-item__label{
			letter-spacing: 3px;
		}


	</style>
</head>

<body>
<div v-cloak id="app">
	<div style="margin-top: 10px;">
		<el-form :model="constructionUnitEntity" :rules="rules" ref="constructionUnitEntity" label-width="140px">
			<el-row>
				<el-col :span="4" class="tab-title">
					基本信息
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="用户名:" prop="userName" label-width="110px">
						<el-input v-model="constructionUnitEntity.userName" autoComplete="off" style="" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="密码:" prop="password" label-width="190px">
						<el-input v-model="constructionUnitEntity.password" style="" placeholder="" show-password auto-complete="new-password"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="企业名称:" prop="entName" label-width="110px">
						<el-input v-model="constructionUnitEntity.entName" style="" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="统一社会信用代码:" prop="uniscid" label-width="190px">
						<el-input v-model="constructionUnitEntity.uniscid" style="" placeholder="" ></el-input>
					</el-form-item>
				</el-col>

			</el-row>

			<el-row>
				<el-col :span="10">
					<el-form-item label="企业所在地:" v-model="constructionUnitEntity.location" style="letter-spacing: 1.2px;" prop="location" label-width="110px">
						<el-select v-model="provinceValue" placeholder="请选择省" @change="chooseProvince" style="width: 150px;">
							<el-option
									v-for="item in provinceData"
									:key="item.code"
									:label="item.name"
									:value="item.name">
							</el-option>
						</el-select>
						<span style="color: #C0CCDA;">—</span>
						<el-select v-model="cityValue" placeholder="请选择市" @change="chooseCity" style="width: 150px;">
							<el-option
									v-for="item in cityData"
									:key="item.code"
									:label="item.name"
									:value="item.name">
							</el-option>
						</el-select>
						<span style="color: #C0CCDA;">—</span>
						<el-select v-model="areaValue" @change="chooseArea" placeholder="请选择区、县" style="width: 150px;">
							<el-option
									v-for="item in areaData"
									:key="item.code"
									:label="item.name"
									:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="9">
					<el-form-item label="企业详细地址:" prop="detailedAddr" label-width="110px">
						<el-input v-model="constructionUnitEntity.detailedAddr" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col span="5">
					<el-form-item label="邮编:"  prop="postalCode" label-width="90px">
						<el-input v-model="constructionUnitEntity.postalCode" placeholder="" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="企业法人:" prop="legalPerson"  label-width="110px">
						<el-input v-model="constructionUnitEntity.legalPerson" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="企业性质:" prop="entType" label-width="110px">
						<el-select  v-model="constructionUnitEntity.entType" placeholder="请选择" style="width: 250px;">
							<el-option label="上市企业" value="1"></el-option>
							<el-option label="上市企业控股" value="2"></el-option>
							<el-option label="上市企业参股" value="3"></el-option>
							<el-option label="国有企业" value="4"></el-option>
							<el-option label="国有企业控股" value="5"></el-option>
							<el-option label="国有企业参股" value="6"></el-option>
							<el-option label="其他" value="7"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="企业成立时间:"  prop="establishTime" label-width="110px">
						<el-date-picker type="date" placeholder="选择日期" v-model="constructionUnitEntity.establishTime" style="width: 250px;">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<!--<el-col span="8">
					<el-form-item label="上市情况:" prop="fileName" label-width="100px" class="listed">
						<el-radio-group v-model="radio2">
							<el-radio :label="3">境外上市</el-radio>
							<el-radio :label="6">境内上市</el-radio>
							<el-radio :label="9">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>-->
			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="联系人:" prop="linkMan" label-width="110px">
						<el-input v-model="constructionUnitEntity.linkMan" placeholder="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="联系电话:"  prop="linkTel" label-width="110px">
						<el-input v-model="constructionUnitEntity.linkTel" placeholder="" style="width: 250px;" ></el-input>
					</el-form-item>
				</el-col>
				<el-col span="6">
					<el-form-item label="企业邮箱:" prop="email" label-width="110px">
						<el-input v-model.trim="constructionUnitEntity.email" placeholder="" style="width: 250px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="办公电话:" prop="bgTel" label-width="290px">
						<el-input v-model="constructionUnitEntity.bgTel"  placeholder=""  style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col span="22">
					<el-form-item label="营业执照:"prop="fujian" label-width="110px">
						<iframe id="newFrame" style="overflow:hidden;height: 200px;width:100%;" frameBorder="0"
								:src="link2"></iframe>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item label="附件:" prop="fujian" label-width="110px" style="letter-spacing: 4px;">
						<iframe id="viewFrame" style="overflow:hidden;height: 200px;width:100%;" frameBorder="0"
								:src="link"></iframe>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<div style="float:right;">
						<el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="submitForm('constructionUnitEntity')">提交</el-button>
					</div>
				</el-col>
			</el-row>
		</el-form>

	</div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            // 验证手机号是否合法
            let checkMobile = (rule, value, callback) => {
                if (!checkIphon(value) && value != '') {
                    callback(new Error('手机号码不合法'));
                } else {
                    callback();
                }
            };
            // 验证邮箱是否合法
            let checkEmail = (rule, value, callback) => {
                if (!isEmail(value) && value != '') {
                    callback(new Error('邮箱不合法'));
                } else {
                    callback();
                }
            };
            // 验证用户名是否合法
            let checkUserName = (rule, value, callback) => {
                if(!isUserName(value) && value != '') {
                    callback(new Error('用户名必须为字母、数字或下划线!'));
				} else {
                    callback();
				}
			};
			// 验证密码是否合法
			let checkPassword = (rule, value, callback) => {
                if(!isPassword(value) && value != "") {
					callback(new Error('密码必须为字母或数字!'));
				} else {
                    callback();
				}
			};
            return {
                uuid:'',
                link:'', // 附件iframe
                link2:'', // 附件iframe
                currentPage: 1, //默认显示页面为1
                pagesize: 5, // 每页的数据条数
                radio2:3,
                provinceValue:'',
                cityValue:'',
                areaValue:'',
                provinceData:[],
                cityData:[],
                areaData:[],
                constructionUnitEntity : {
                    id:"",
                    entName: "",
                    unscid: "",
                    location:"",
                    businessLicense: "",
                    detailedAddr: "",
                    establishTime: "",
                    password:'',
                    postalCode: "",
                    legalPerson: "",
                    entType: "",
                    linkTel: "",
                    linkMan: "",
                    email: "",
                    bgTel: "",
					userName: ""
                },
                rules: {
                    entName: [{
                        required: true,
                        message: '请输入企业名称',
                        trigger: 'blur'
                    },{
                        max : 500,
						message : '长度最大为500个字符',
						trigger : 'blur'
					}],
                    uniscid: [{
                        required: true,
                        message: '请输入统一社会信用代码',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
					}],
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},{
                        min : 2,
						max : 50,
						message : '用户名长度必须在2-50个字符',
						trigger : 'blur'
					},{
                        validator : checkUserName,
						message : '用户名必须为字母、数字或下划线',
						trigger : 'blur'
					}],
                    location: [{
                        required: true,
                        message: '请输入企业所在地',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },{
						min: 6,
						message: '密码不小于6位',
						trigger: 'blur'
					},{
						validator : checkPassword,
						message : '密码必须由字母或数字组成',
						trigger: 'blur'
					},{
                        max : 500,
                        message : '长度最大为200个字符',
                        trigger : 'blur'
                    }],
                    legalPerson: [{
                        required: true,
                        message: '请输入企业法人',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    postalCode: [{
                        min: 6,
                        max: 6,
                        message: '邮编格式不正确',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    entType: [{
                        required: true,
                        message: '请选择企业性质',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    linkMan: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    linkTel: [{
                        required: true,
                        message: "请输入联系电话",
                        trigger: 'blur'
                    },{
                        validator: checkMobile,
                        message: '联系电话不合法',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为100个字符',
                        trigger : 'blur'
                    }],
                    email: [{
                        validator: checkEmail,
                        message: '企业邮箱不合法',
                        trigger: 'blur'
                    },{
                        max : 500,
                        message : '长度最大为500个字符',
                        trigger : 'blur'
                    }],
                    detailedAddr : [{
                        max : 500,
						message : '长度最大为500个字符',
						trigger : 'blur'
					}],
                    bgTel : [{
                        max : 200,
						message : '长度最大为200个字符',
						trigger : 'blur'
					}]

                }
            }
        },
        created(){
            axios.get('../../json/ChinaCity.json').then(res=>{
                this.provinceData = res.data;
            }).catch(e => {
                this.$message.error("网络连接超时");
            })
        },
        mounted(){
            this.getUuid();
        },
        methods: {
            submitForm(constructionUnitEntity) {
                this.$refs[constructionUnitEntity].validate((valid) => {
                    if (valid) {
                        this.constructionUnitEntity.id = this.uuid;
						var  encrypt = new JSEncrypt();
						encrypt.setPublicKey(publicKey);
						let result = encrypt.encrypt(this.constructionUnitEntity.password);
						this.constructionUnitEntity.password =result;
                        axios({
                            method: 'post',
                            url: '/dzjap/construct/regist',
                            data: this.constructionUnitEntity,
                        })
                            .then(response => {
                                let data = response.data;
                                if (data.code == 200) {
                                    this.$message({
                                        message: '注册成功,3秒后跳转到登录页面...',
                                        type: 'success'
                                    });
                                    const TIME_COUNT = 3;
                                    if(!this.timer) {
                                        this.count = TIME_COUNT;
                                        this.show = false;
                                        this.timer = setInterval(() => {
											if(this.count > 0 && this.count <= TIME_COUNT) {
												this.count--;
											} else {
											    this.show = true;
											    clearInterval(this.timer);
											    this.timer = null;
                                                this.tologin();
											}

										},1000)
									}
                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                });

            },
			tologin() {
                parent.vue.logoutSystem();
			},
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: '/dzjap/uuid/getUuid',
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.code == 200) {
                            this.uuid = response.data.data;
                            this.link="../upload/annex.html?uuid="+this.uuid+"&flag=1";
                            this.link2="../upload/annex.html?uuid="+this.uuid+"yyzz"+"&flag=1";
                            console.log(this.uuid);
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            resetForm(formName) {
                console.log('sdsds')
                this.$refs[formName].resetFields();
                console.log('sdsds')
            },
            chooseProvince(value){
                this.cityValue = '';
                this.areaValue = '';
                this.cityData = [];
                this.areaData = [];
                this.provinceData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.cityData = e.cityList;
                        return;
                    }
                })
                console.log(value)
                this.constructionUnitEntity.location = value;
            },
            chooseCity(value){
                this.areaValue = '';
                this.cityData.map(e=>{//遍历数据
                    if( value == e.name){
                        this.areaData = e.areaList;
                        return;
                    }
                })
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
            },
            chooseArea(value){
                this.constructionUnitEntity.location=this.constructionUnitEntity.location +"-" +value;
            },

            //检查上传类型
            checkType() {
                let vm = this;
                let allImgExt = '.xls|.xlsx|';
                let filePath = this.$refs.head.value;
                let extName = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                if (allImgExt.indexOf(extName + '|') === -1) {
                    this.$message("请选择正确的Excel文件");
                    this.$refs.head.value = '';
                    excelContent = [];
                    return;
                }
                let file = this.$refs.head.files[0];
                this.selectForm.fileName = file.name;

            },
            //选取文件
            selectFile(){
                this.$refs.head.click();
            },
            //每页下拉显示数据
            handleSizeChange: function(size) {
                this.pagesize = size;
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                /*console.log(this.currentPage) */
            },
        }

    })
</script>
</body>
</html>